<template>
<el-dialog
  :title="title"
  :visible="visible"
   width="1100px" append-to-body
  @close="close" :close-on-click-modal="false">
  <el-form :inline="true" :model="form" :rules="rules" ref="form" class="search-panel--left">
    <el-form-item>
        <el-input placeholder="请输入人员姓名" v-model="form.userName"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
    </el-form-item>
  </el-form>
  <el-form :inline="true" class="search-panel--right">
    <el-form-item>
        <el-button type="success" @click="add">添加</el-button>
    </el-form-item>
    <el-form-item>
        <el-button type="danger" @click="batch">批量删除</el-button>
    </el-form-item>
  </el-form>
  <main-table
      ref="table"
      height="400px"
      :loading="loading"
      :pageTotal="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
      :data="tableData"
      :columns="columns"
      :currentPage.sync="pageNum"
      :handleColumns="handleColumns"
      :columnType="columnType"
      border>
      <template slot-scope="scope" slot="handle">
        <el-button type="text" @click="edit(scope)" title="编辑">
          <icon-svg name="edit"></icon-svg>
        </el-button>
        <el-button type="text"  @click="remove(scope)" title="删除">
          <icon-svg name="delete"></icon-svg>
        </el-button>
      </template>
    </main-table>
  <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
  </span>
  <add-contact v-if="showAddContact" ref="addcontact" @refresh="search" />
</el-dialog>
</template>
<script>
import addContact from './add-contact.vue';
export default {
  components: {
    addContact
  },
  props: {
    tree: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showAddContact: false,
      noticeTypeList: [],
      content: '',
      visible: false,
      title: '通信录',
      loading: false,
      isEdit: false,
      dic: [],
      areaList: [],
      form: {
        userName: '',
        areaId: ''

      },
      rules: {
        title: [
          { required: true, message: '请输入公告标题', trigger: 'blur' }
        ],
        noticetype: [
          { required: true, message: '请选择公告类型', trigger: 'blur' }
        ]
      },
      pageTotal: 0,
      columnType: ['selection', 'index'],
      columns: [
        { label: '人员姓名', prop: 'userName' },
        { label: '地区', prop: 'areaName', width: '100px' },
        { label: '所在单位', prop: 'departName', width: '160px' },
        { label: '电话', prop: 'userMobile', width: '120px' },
        { label: '职务', prop: 'post' }
      ],
      handleColumns: {
        label: '操作', align: 'center', fixed: 'right', width: 100
      },
      multipleSelection: [],
      tableData: [],
      pageNum: 1,
      pageSize: 20
    };
  },
  computed: {

  },
  methods: {
    add() {
      this.showAddContact = true;
      this.$nextTick(_ => {
        this.$refs.addcontact.openDialog();
      });
    },
    validForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      });
    },
    async submit() {
      this.$emit('success');
    },
    openDialog() {
      this.isEdit = false;
      this.visible = true;
    },
    // openDialogByEdit(row) {
    //   console.log('row', row);
    //   this.isEdit = true;
    //   this.visible = true;
    //   for (const key in row) {
    //     this.form[key] = row[key];
    //   }
    //   this.form.content = row.contentstring;
    // },
    close() {
      this.visible = false;
      for (const key in this.form) {
        this.form[key] = '';
      }
      this.form.noticestatus = 1;
      this.$refs.form.resetFields();
    },
    batch() {
      if (this.multipleSelection.length) {
        const ids = this.multipleSelection.map(v => v.userId);
        this.$confirm(`是否删除该这${ids.length}条记录?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteData(ids);
        }).catch(() => {

        });
      } else {
        this.$message({
          message: '请至少选择一项',
          type: 'warning'
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    edit(scope) {
      console.log(scope);
      this.showAddContact = true;
      this.$nextTick(_ => {
        this.$refs.addcontact.openDialogByEdit(scope.row);
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      if (typeof val === 'number') {
        console.log(`当前页: ${val}`, val);
        this.pageNum = val;
        this.getDataList();
      }
    },
    search() {
      this.pageNum = 1;
      this.getDataList();
    },
    getDataList() {
      const page = this.pageNum;
      const rows = this.pageSize;
      const params = {
        url: `/api/ems/meeting/contact/page/list?page=${page}&rows=${rows}`,
        type: 'post',
        params: this.form

      };
      this.loading = true;
      this.$ajax(params).then(resp => {
        this.loading = false;
        const { result, rows, total } = resp;
        if (result) {
          this.tableData = rows;
          this.pageTotal = total;
        }
      });
    },
    remove(scope) {
      console.log(scope);
      this.$confirm('是否删除该条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData([scope.row.userId]);
      }).catch(() => {

      });
    },
    deleteData(ids) {
      const params = {
        url: `/api/ems/meeting/contact/delete`,
        type: 'post',
        params: ids
      };
      this.$ajax(params).then(resp => {
        const { success } = resp;
        if (success) {
          this.$message({ type: 'success', message: '删除成功!' });
        }
        this.getDataList();
      });
    }
  },
  created() {
    this.getDataList();
  }
};
</script>

<style>

</style>